<template>
  <div>
    <div class="">
      <h3>商品分析</h3>
      <div>
        <div class="flex justify-between">
          <div class="flex items-center mt-4 mb-4">
            <img
              class="w-[76px] h-[76px] rounded-[12px] bg-#ccc"
              src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01lQ7T7U1S9wNfq8m4y_!!1034622205.png"
              alt=""
            />
            <div class="ml-4">
              <div class="flex items-center">
                <h3 class="text-[20px] mr-4">2025新款床品大学生宿舍床上三件套3被套床笠4</h3>
                <el-button type="primary" size="small">查看</el-button>
              </div>
              <div class="flex text-[14px] mt-2">
                <p>
                  <span class="mr-2 text-[#999]">创建部门</span>
                  <span class="text-[#101010]">运营部</span>
                </p>
                <p class="ml-4">
                  <span class="mr-2 text-[#999]">创建者</span>
                  <span class="text-[#101010]">小薛</span>
                </p>
              </div>
            </div>
          </div>
          <div class="flex mt-6 mb-4">
            <div>
              <el-radio-group v-model="radio2" text-color="#626aef" fill="rgb(239, 240, 253)">
                <el-radio-button border label="今日" value="今日" />
                <el-radio-button label="近七天" value="近七天" />
                <el-radio-button label="近30天" value="近30天" />
              </el-radio-group>
            </div>
            <div class="ml-4">
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </div>
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="box-card">
                <template #header>
                  <div class="flex flex-col card-header">
                    <span class="text-[16px] font-bold text-[#101010]">漏斗分析</span>
                    <span class="text-[#999] text-[12px]">Funnel analysis</span>
                  </div>
                </template>
                <div>
                  <FunnelEcharts />
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <template #header>
                  <div class="flex flex-col card-header">
                    <span class="text-[16px] font-bold text-[#101010]">落地页质量分析</span>
                    <span class="text-[#999] text-[12px]">Quality analysis of landing pages</span>
                  </div>
                </template>
                <div>
                  <LandingPageEcharts />
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <template #header>
                  <div class="flex flex-col card-header">
                    <span class="text-[16px] font-bold text-[#101010]">销量走势</span>
                    <span class="text-[#999] text-[12px]">Sales trend</span>
                  </div>
                </template>
                <div>
                  <SalesTrendEcharts />
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mt-6">
            <el-col :span="16">
              <el-card class="box-card">
                <template #header>
                  <div class="flex flex-col card-header">
                    <span class="text-[16px] font-bold text-[#101010]">SKU分析</span>
                    <span class="text-[#999] text-[12px]">SKU analysis</span>
                  </div>
                </template>
                <div>
                  <SKUecharts />
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <template #header>
                  <div class="flex flex-col card-header">
                    <span class="text-[16px] font-bold text-[#101010]">来源分析（按设备）</span>
                    <span class="text-[#999] text-[12px]">Source analysis (by device)</span>
                  </div>
                </template>
                <div>
                  <SourceEcharts />
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'Analysis' })
import FunnelEcharts from './funnelEcharts.vue'
import LandingPageEcharts from './landingPageEcharts.vue'
import SalesTrendEcharts from './salesTrendEcharts.vue'
import SKUecharts from './SKUecharts.vue'
import SourceEcharts from './sourceEcharts.vue'
const radio2 = ref('今日')
</script>

<style lang="scss" scoped>
.box-card {
  background: #ffffff;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.06);
  border-radius: 14px 14px 14px 14px;
  :deep(.el-card__header) {
    border: none;
  }
  :deep(.el-card__body) {
    padding: 0 20px;
  }
  :deep(.el-card__header) {
    padding: 20px 20px 0 20px;
  }
}
</style>
